<template>
  <div class="layout">
    <!-- 在线课程区域 -->
    <div class="trainDiv" style="margin-top: 70px;">
      <ContainerTitle text="推荐课程" :more="true" @jump="gotoList(1)"></ContainerTitle>
      <div class="videoList">
        <VideoFrame 
          class="videoFrame" 
          v-for="video in onlineCourseList" 
          :video="video" 
          :url="'onlineCourseDetail'" 
          :key="video.id"></VideoFrame>
      </div>
		</div>
    <!-- 培训通知 -->
    <div class="trainDiv">
      <ContainerTitle text="培训活动" :more="true" @jump="gotoList(0)"></ContainerTitle>
      <div class="noticeList">
        <NoticeFrame class="noticeFrame" v-for="notice in trainNoticeList" :notice="notice" :key="notice.id"></NoticeFrame>
      </div>
    </div>
  </div>
</template>

<script>

import VideoFrame from '@/components/videoFrame'
import NoticeFrame from './components/noticeFrame'

import { getTrainNoticeList, getOnlineCourseList }from '@/common/api/training'

export default {
  name: "service",
  components: { VideoFrame, NoticeFrame },
  data() {
    return {
      trainNoticeList: [], //培训通知列表
      onlineCourseList: [], //在线课程列表
    };
  },
  methods: {
    // 获取培训通知列表
    async getTrainNoticeList() {
      let params = {
        pageNum: 1,
        pageSize: 6
      }
      const { code, msg, rows } = await getTrainNoticeList(params)
      if (code != '200') return this.$message.warning(msg);
      this.trainNoticeList = rows;
    },
    // 获取在线课程列表
    async getOnlineCourseList(){
      let params = {
        pageNum: 1,
        pageSize: 3
      }
      const { code, msg, rows } = await getOnlineCourseList(params)
      if (code != '200') return this.$message.warning(msg);
      this.onlineCourseList = rows;
    },
    gotoList(type){
      this.$router.push({name: 'trainingNotice', params: {type}});
    },
  },
  // async mounted() {
  //   await this.getTrainNoticeList()
  //   await this.getOnlineCourseList()
  // },
  async activated() {
    await this.getTrainNoticeList()
    await this.getOnlineCourseList()
  }
};
</script>

<style lang="scss" scoped>
.breadcrumb {
  width: 1200px;
  margin: 20px 0;
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.trainDiv {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 30px;
  .titleDiv {
    color: #045db9;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    border-bottom: 2px solid #045db9;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
  }
  .videoList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .videoFrame {
      width: 375px;
      margin-bottom: 20px;
    }
  }
  .noticeList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .noticeFrame {
      width: 375px;
      margin-bottom: 20px;
    }
  }
}
.more:hover {
  cursor: pointer;
  text-decoration: underline;
}
</style>
